<template>
  <div style="width: 100%">
    <div style="width: 250px; float: left">
      <a-card
        @contextDistrict.prevent
        size="small"
        class="eip-admin-card-small"
      >
        <div slot="title">
          <a-space>
            <a-button type="primary" @click="districtInit()">
              <a-icon type="redo" />刷新
            </a-button>
          </a-space>
        </div>
        <a-directory-tree
          :style="district.style"
          :load-data="districtLoad"
          :tree-data="district.data"
          @select="districtSelect"
        ></a-directory-tree>
      </a-card>
    </div>
    <div class="eip-admin-card-tree-left">
      <a-card class="eip-admin-card-small" size="small">
        <div slot="title">
          <eip-toolbar
            @map="districtMapShow"
            @onload="toolbarOnload"
          ></eip-toolbar>
        </div>
        <div slot="extra">
          <vxe-toolbar
            style="height: 30px"
            ref="toolbar"
            custom
            print
            export
            :refresh="{ query: tableInit }"
          ></vxe-toolbar>
        </div>

        <a-spin :spinning="table.loading">
          <vxe-table
            ref="table"
            id="systemdistrictlist"
            :print-config="{}"
            :export-config="{}"
            :radio-config="{
              trigger: 'row',
              highlight: true,
              strict: false,
            }"
            :height="table.height"
            :data="table.data"
          >
            <vxe-table-column
              type="radio"
              width="60"
              align="center"
            ></vxe-table-column>
            <vxe-table-column
              type="seq"
              title="序号"
              width="60"
            ></vxe-table-column>
            <vxe-table-column
              field="name"
              title="名称"
              min-width="120"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="districtId"
              title="代码"
              showOverflow="ellipsis"
              width="120"
            ></vxe-table-column>
            <vxe-table-column
              field="shortName"
              title="简称"
              width="60"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="cityCode"
              title="城市代码"
              width="100"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="zipCode"
              title="邮编"
              width="100"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="lng"
              title="经度"
              width="100"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="lat"
              title="纬度"
              width="100"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="pinYin"
              title="拼音"
              width="100"
              showOverflow="ellipsis"
            ></vxe-table-column>
            <vxe-table-column
              field="isFreeze"
              title="禁用"
              align="center"
              width="80"
            >
              <template v-slot="{ row }">
                <a-switch :checked="row.isFreeze" />
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="orderNo"
              title="排序"
              align="center"
              width="80"
            ></vxe-table-column>
            <vxe-table-column
              title="操作"
              align="center"
              fixed="right"
              width="100px"
            >
              <template #default="{ row }">
                <a-tooltip
                  @click="tableMapRow(row)"
                  title="地图"
                  v-if="visible.map"
                >
                  <label class="text-eip eip-cursor-pointer">地图</label>
                </a-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
        </a-spin>
      </a-card>
    </div>

    <districtmap
      ref="map"
      v-if="map.visible"
      :visible.sync="map.visible"
      :title="map.title"
      :lng="map.lng"
      :lat="map.lat"
    ></districtmap>
  </div>
</template>

<script>
import { districtQuery, query } from "@/services/system/district/list";
import eipToolbar from "@/pages/common/usercontrol/eip-toolbar";
import { selectTableRowRadio } from "@/utils/util";
import districtmap from "./map";
export default {
  components: { eipToolbar, districtmap },
  data() {
    return {
      district: {
        style: {
          overflow: "auto",
          height: this.eipHeaderHeight() - 72 + "px",
        },
        data: [],
      },
      table: {
        loading: true,
        data: [],
        height: this.eipHeaderHeight() - 72 + "px",
      },

      map: {
        visible: false,
        lng: "",
        lat: "",
        title: "",
      },

      visible: {
        map: false,
      },
    };
  },
  created() {
    this.districtInit(0);
    this.tableInit(0);
  },
  mounted() {
    this.$refs.table.connect(this.$refs.toolbar);
  },
  methods: {
    /**
     * 初始化行政区划树
     */
    districtLoad(treeNode) {
      const that = this;
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        districtQuery(treeNode.dataRef.key).then((result) => {
          if (result.code === that.eipResultCode.success) {
            treeNode.dataRef.children = result.data;
            that.district.data = [...that.district.data];
            resolve();
          }
        });
      });
    },

    /**
     * 初始化菜单树
     */
    districtInit(id) {
      let that = this;
      districtQuery(id).then((result) => {
        if (result.code === that.eipResultCode.success) {
          that.district.data = result.data;
        }
      });
    },

    /**
     * 树点击
     */
    districtSelect(keys) {
      let that = this;
      that.table.loading = true;
      query(keys).then((result) => {
        if (result.code === that.eipResultCode.success) {
          that.table.data = result.data;
        }
        that.table.loading = false;
      });
    },

    /**
     * 初始化列表数据
     */
    tableInit(id) {
      let that = this;
      that.table.loading = true;
      query(id).then((result) => {
        if (result.code == that.eipResultCode.success) {
          that.table.data = result.data;
        }
        that.table.loading = false;
      });
    },
    /**
     * 权限按钮加载完毕
     */
    toolbarOnload(buttons) {
      this.visible.map = buttons.filter((f) => f.method == "map").length > 0;
    },

    /**
     * 区域地图
     */
    districtMapShow() {
      let that = this;
      selectTableRowRadio(
        that.$refs.table,
        function (row) {
          that.map.lng = row.lng;
          that.map.lat = row.lat;
          that.map.title = row.name;
          that.map.visible = true;
        },
        that
      );
    },

    /**
     * 地图
     */
    tableMapRow(row) {
      this.map.lng = row.lng;
      this.map.lat = row.lat;
      this.map.title = row.name;
      this.map.visible = true;
    },
  },
};
</script>